<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/index4.css" />
		<meta name="viewport" content="width=640,user-scalable=no"  />
	</head>

	<body>
		<div class="content">
			<div class="alert alert_son">
				<div class="bg_title">
					<img src="../images/02_03.png" />
				</div>
				<div class="tab">					
					<table class="tb">
						

					</table>
					<div class="my_order">
						<table class="tb_son">
							<tr></tr>
						</table>
					</div>
				</div>
				<div class="icons">
					<a href="index.html"><span class="iconfont icon-fangzi"></span></a>
				</div>
			</div>
		</div>
		<script src="../js/jquery-2.1.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			function each() {
				var tableDom = $('.tb');
				var html;
				/***********获取json*****************/
				$.ajax({
					type: "GET",
					url: "../js/img.json",
					dataType: "json",
					success: function(data) {
						$.each(data, function(i, item) {
							var trs = "";
							trs += "<tr><td>" + (i + 1) + "</td><td><div class='circle'><img src=" + item.src + "/></div></td><td>" + item.name + "</td><td>" + item.num + "</td></tr>";
							html += trs;
						});
						tableDom.html(html);
						/*************排序****************/
						$(function() {
							var arr = [];
							for(var i = 0; i < $('.tb tr').length; i++) {
								
								//把数据推送到数组里面
								arr.push(parseInt($('.tb tr').eq(i).children().eq(3).text()));
							}

							//给tr整行内容冒泡排序
							for(var x = 0; x < arr.length; x++) {
								for(var y = x + 1; y < arr.length; y++) {
									if(arr[x] < arr[y]) {
										var tem, empty;
										empty = arr[x];
										arr[x] = arr[y];
										arr[y] = empty;
										tem = $('.tb tr').eq(x).html();
										$('.tb tr').eq(x).html($('.tb tr').eq(y).html());
										$('.tb tr').eq(y).html(tem);
									}
								}
								pai();
							}
							
							//当前排名
							$('.my_order table tr').html($('.tb tr').eq(15).html());
							//添加冠军
							for(var l=0;l<3;l++){								
								$('.tb tr').eq(l).children().eq(0).html('<span class="iconfont icon-guanjun"></span><p>'+(l+1)+'</p>');
								$('.tb tr').eq(0).children().eq(0).children().eq(0).css('color','yellow');
								$('.tb tr').eq(2).children().eq(0).children().eq(0).css('color','darkorange');
							}																							
							$(document).ready(function() {
								var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
								var nScrollTop = 0; //滚动到的当前位置
								var nDivHight = $(".tab").height();
								$(".tab").scroll(function() {
									nScrollHight = $(this)[0].scrollHeight;
									nScrollTop = $(this)[0].scrollTop;
									if(nScrollTop +nDivHight>=nScrollHight) {										
										var tem;										
										$('.my_order').css('display','none')
									}
									if(nScrollTop +nDivHight<nScrollHight) {										
										var tem;										
										$('.my_order').css('display','block')
									}
								});
							});

						});
					},
					error: function(data) {
						//						console.log(data)
					}
				});
				/*************序号排序**************/
				function pai() {
					for(var i = 0; i < $('.tb tr').length; i++) {
						$('.tb tr').eq(i).children().eq(0).text(i + 1);
					}
				};
			}
			each();

			/*$(function() {
				var json = [{
						"name": "ww",
						"age": 12
					},
					{
						"name": "ww",
						"age": 12
					}
				];
				$.each(json, function(i, item) {
					console.log(item.name);
				});
			})*/
		</script>
	</body>

</html>